<template>
  <scroll-view class="classify" scroll-x="true" style="width: 100%">
    <div class="group-classify" v-for="(item,index) in classify" :key="index" ﻿@tap="toClassifyPost(item.id,item.name)">
      <h1 class="group-classify-title" :style="{backgroundColor: item.background}">{{item.name}}</h1>
      <div>
        <div class="group-classify-main" v-for="(aLine,key) in item.group" :key="key" ﻿@tap.stop="toTheGroupDetails(aLine.id)">
          <img :src="picPre + aLine.cover" style="width: 54rpx;height: 54rpx" alt="">
          <div>
            <p class="group-classify-main-name">{{aLine.name}}</p>
            <p>{{aLine.member_num}}成员</p>
          </div>
        </div>
      </div>
    </div>
  </scroll-view>
</template>

<script>
    export default {
        name: "classify",
      props:{
        classify:{
          type:Array
        }
      },
      data(){
          let that = this;
        return{
          picPre: that.$api.picPre,
        }
      },
      methods:{
        toClassifyPost(id,name){
			uni.navigateTo({
				url: "/social/classifyPost?id="+ id + "&&title="+ name
			})
          // this.$router.push({
          //   name: "/social/classifyPost",
          //   params: { id: id },
          //   query: { title: name }
          // })
        },
        toTheGroupDetails(id){
			uni.navigateTo({
				url: "/social/groupDetails?id="+ id
			})
        }
      }
    }
</script>

<style scoped>
  .classify{
    height: 380rpx;
    white-space: nowrap;
    /*overflow-x:auto;*/
    /*overflow-y:hidden;*/
    /*display:-webkit-box;*/
  }
  /*.classify::-webkit-scrollbar{*/
  /*  display: none;*/
  /*}*/
.group-classify{
  width: 508rpx;
  margin-right: 20rpx;
  display: inline-block;
  vertical-align: top;
}
.group-classify>div{
  height: 292rpx;
}
  .group-classify-title{
    width: 100%;
    padding: 18rpx 0 17rpx 22rpx;
    box-sizing: border-box;
    background-color: #EF9756;
    font-size: 32rpx;
    color: #FFFFFF;
    border-radius: 16rpx 16rpx 0 0;
  }
  .group-classify-title+div{
    border: 1rpx solid #EEEEEE;
    border-radius: 0 0 16rpx 16rpx;
  }
  .group-classify-main{
    display: flex;
    flex: 1;
    padding: 0 22rpx;
    box-sizing: border-box;
  }
.group-classify-main>img{
  width: 54rpx;
  height: 54rpx;
  margin-top: 18rpx;
  margin-right: 27rpx;
  box-sizing: border-box;
  border-radius: 6rpx;
}
.group-classify-main>div{
  width: 82%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0 30rpx;
  box-sizing: border-box;
}
.group-classify-main>div:nth-child(even){
  border-top: 1rpx solid #EEEEEE;
}
.group-classify-main>div>p:first-child{
  font-size: 24rpx;
  color: #323232;
}
.group-classify-main>div>p:last-child{
  font-size: 20rpx;
  color: #999999;
}
  .group-classify-main-name{
    width: 300rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
